<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表情识别</title>
    <style>
        :root{
            --container-max-width: 1000px;
            --container-padding: clamp(14px, 3vw, 28px);
            --gap: clamp(10px, 2vh, 18px);
            --btn-min-width: 140px;
        }

        /* 全局基础 */
        *{ box-sizing: border-box; }
        html,body{ height:100%; }
        body {
            font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC";
            background: #f7f7f7;
            margin: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            padding: env(safe-area-inset);
        }

        /* 主容器：宽度随窗口放缩，高度受限，保证不需要垂直滚动 */
        .container {
            width: min(92vw, var(--container-max-width));
            height: min(86vh, 820px);       /* 控制最大高度，保证元素在一屏内 */
            background: #fff;
            border-radius: 18px;
            box-shadow: 0 8px 36px rgba(0,0,0,0.08);
            padding: var(--container-padding);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between; /* 上传区（顶部）、结果区（中间）、开始按钮（底部）分布 */
            gap: var(--gap);
            overflow: hidden;               /* 防止内部滚动条出现 */
        }

        /* 上传区域（顶部） */
        .upload-section {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            flex: 0 0 auto;
        }

        /* 上传按钮样式 */
        .upload-button {
            min-width: var(--btn-min-width);
            padding: 10px 20px;
            height: clamp(44px, 6vh, 60px);
            background: linear-gradient(180deg,#43a047,#2e7d32);
            color: #fff;
            border: none;
            border-radius: 12px;
            font-size: clamp(15px, 2.2vh, 20px);
            cursor: pointer;
            box-shadow: 0 8px 18px rgba(46,125,50,0.12);
            transition: transform .14s ease, box-shadow .14s ease;
        }
        .upload-button:hover{
            transform: translateY(-3px) scale(1.02);
            box-shadow: 0 12px 28px rgba(46,125,50,0.16);
        }

        /* 上传成功文字（按钮下方，默认隐藏，通过 JS 加 .show 显示） */
        .upload-success {
            font-size: clamp(12px, 1.8vh, 14px); /* 比正常小约20% */
            color: #2e7d32;
            margin-top: 6px;
            opacity: 0;
            transform: translateY(-6px);
            transition: opacity .28s ease, transform .28s ease;
            pointer-events: none;
        }
        .upload-success.show {
            opacity: 1;
            transform: translateY(0);
            animation: pulse .9s ease-in-out 2;
        }
        @keyframes pulse {
            0%{ transform: scale(1) translateY(0); }
            50%{ transform: scale(1.06) translateY(0); }
            100%{ transform: scale(1) translateY(0); }
        }

        /* 结果区（中间）—— 占据剩余空间，自适应展示 */
        .result-box {
            width: 100%;
            flex: 1 1 auto;                 /* 占据中间可用空间 */
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
            border: 1px solid #e9e9e9;
            background: linear-gradient(180deg,#ffffff,#fbfbfb);
            padding: 12px;
            overflow: hidden;
            min-height: 36%;                /* 在窄高屏上仍然可见 */
        }

        /* 图片/视频在结果区按比例适配 */
        .result-box img,
        .result-box video {
            max-width: 100%;
            max-height: 100%;
            width: auto;
            height: auto;
            object-fit: contain;
            border-radius: 8px;
            display: block;
        }

        /* 底部开始预测按钮 */
        .predict-button {
            min-width: 160px;
            padding: 8px 20px;
            height: clamp(44px, 6vh, 60px);
            border-radius: 12px;
            border: none;
            background: linear-gradient(180deg,#2e7d32,#1b5e20);
            color: #fff;
            font-size: clamp(15px, 2.2vh, 20px);
            cursor: pointer;
            transition: transform .14s;
            box-shadow: 0 8px 18px rgba(27,94,32,0.12);
        }
        .predict-button:hover{ transform: translateY(-3px); }

        /* 小屏/窄屏进一步收缩字体和间距，仍保证三部分在一屏内 */
        @media (max-height: 720px) {
            .container { height: min(95vh, 720px); padding: 12px; gap: 10px; }
            .result-box { min-height: 34%; }
            .upload-button, .predict-button { height: clamp(40px, 7vh, 50px); }
            .upload-success { font-size: 12px; }
        }

        /* 额外无障碍焦点样式 */
        .upload-button:focus, .predict-button:focus { outline: 3px solid rgba(66,153,225,0.18); outline-offset: 3px; }

    </style>
</head>
<body>
<div class="container">
    <div class="upload-section">
        <button class="upload-button" onclick="getFile()">上传文件</button>
        <div id="uploadSuccess" class="upload-success">上传成功！</div>
    </div>
    <div class="result-box" id="processedImageBox">预测结果将在这里显示</div>
    <button class="upload-button" style="margin-top: 20px;" onclick="sendFile()">开始预测</button>
</div>

<script>
    let selectedFile = null;



    function getFile() {
        const input = document.createElement('input');
        input.type = 'file';
        input.accept = 'image/*,video/*';
        input.onchange = e => {
            selectedFile = e.target.files[0];
            if (!selectedFile) return;

            if (!selectedFile.type.startsWith('image')&&!selectedFile.type.startsWith('video')){
                alert("请选择图片或视频文件!");
                return;
            }
            // 选中文件后
            document.getElementById('uploadSuccess').classList.add('show');
            // 2秒后隐藏
            setTimeout(()=>document.getElementById('uploadSuccess').classList.remove('show'), 2000);
        };
        input.click();


    }

    function sendFile() {
        if (!selectedFile) {
            alert("请先选择文件");
            return;
        }

        const formData = new FormData();
        formData.append('file', selectedFile);

        fetch('http://localhost:8000/predict', {
            method: 'POST',
            body: formData,
        })
            .then(response => response.json())
            .then(data => {
                if (data.code === 200 && data.type === "image") {
                    // 显示图片
                    document.getElementById('processedImageBox').innerHTML =
                        `<img src="data:image/jpeg;base64,${data.processed_img_base64}" />`;
                } else if (data.code === 200 && data.type === "video") {
                    // 视频用流式播放
                    document.getElementById('processedImageBox').innerHTML =
                        `<img src="http://localhost:8000${data.stream_url}" style="max-width: 100%;"/>`;
                }
            })
            .catch(error => console.error('Error:', error));
    }
</script>
</body>
</html>
